<template>
  <div class="goods">
    <div class="img">
      <img :src="img" preview>
    </div>
    <div class="name">
      <h3>{{ title }}</h3>
      <h5>{{ guage }}</h5>
    </div>
    <div class="price">
      <h3>￥{{ price }}</h3>
      <h5>x{{ count }}</h5>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'GoodsItem',
    props: {
      img: String,
      title: String,
      guage: String,
      price: String,
      count: Number
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .goods {
    position: relative;
    display: flex;
    padding: 0.1rem;
    .img {
      flex: 0 0 1.5rem;
      height: 1.5rem;
      width: 1.5rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .name {
      flex: 1;
      padding: 0.1rem;
      h3 {
        font-size: 0.28rem;
      }
      h5 {
        margin-top: 0.1rem;
        color: $colorGray;
      }
    }
    .price {
      flex: 0 0 0.8rem;
      text-align: right;
      padding: 0.1rem 0;
    }
    .name, .price {
      h3 {
        font-size: 0.28rem;
      }
      h5 {
        margin-top: 0.1rem;
        color: $colorGray;
      }
    }
    .btn {
      position: absolute;
      right: 0.1rem;
      bottom: 0.1rem;
      padding: 0.05rem;
      border: 1px solid #717171;
      background: #EEEEEE;
      border-radius: 20px;
    }
    .desc {
      position: absolute;
      right: 0.1rem;
      bottom: 0.1rem;
      padding: 0.05rem;
    }
  }

</style>
